<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <label for="promptInput">输入提示词: </label>
        <input type="text" id="promptInput" placeholder="在这里输入...">
        <button id="submitPrompt">获取链接</button>
    </div>
    <div id="outputArea"></div> <!-- 用于显示状态和链接 -->

    <script>
        const apiUrl = 'https://api.coze.cn/v3/chat';
        const apiKey = "Bearer pat_72lCfOZdDlQRo5YET5kK2w4ookRhbO4oqRGQCaq7BwxfxzP9TTgRQLca6pxzWjNE"; // 考虑将密钥存储在更安全的地方
        const botId = "7490455634098896959";
        const userId = "123123***"; // 考虑使其可配置或动态生成

        const promptInput = document.getElementById('promptInput');
        const submitButton = document.getElementById('submitPrompt');
        const outputArea = document.getElementById('outputArea');

        async function fetchAndInjectUrl(prompt) {
            // 清除之前的输出
            outputArea.innerHTML = '';

            const requestBody = {
                "bot_id": botId,
                "user_id": userId,
                "stream": true, // *** 改回 true 以处理流式响应 ***
                "auto_save_history": true,
                "additional_messages": [
                    {
                        "role": "user",
                        "content": prompt, // 使用传入的提示词
                        "content_type": "text"
                    }
                ]
            };

            const statusDiv = document.createElement('div');
            statusDiv.textContent = '正在发送请求...';
            outputArea.appendChild(statusDiv); // 将状态添加到输出区域

            try {
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        "Authorization": apiKey,
                        'Content-Type': 'application/json',
                        'Accept': 'text/event-stream' // *** 接受流式响应 ***
                    },
                    body: JSON.stringify(requestBody)
                });

                if (!response.ok) {
                    const errorText = await response.text(); // 尝试获取错误详情
                    throw new Error(`HTTP 错误! 状态: ${response.status}, 响应: ${errorText}`);
                }

                // *** 处理流式响应 ***
                if (!response.body) {
                    throw new Error('响应体为空，无法读取流。');
                }

                statusDiv.textContent = '正在接收数据...'; // 更新状态
                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');
                let buffer = '';
                let urlFound = false;

                while (true) {
                    const { value, done } = await reader.read();
                    if (done) {
                        console.log('数据流结束');
                        break;
                    }

                    buffer += decoder.decode(value, { stream: true });
                    // 处理可能的多条消息或不完整的消息
                    const lines = buffer.split('\n');
                    buffer = lines.pop() || ''; // 保留下不完整的一行

                    for (const line of lines) {
                        if (line.startsWith('data:')) {
                            const jsonData = line.substring(5).trim();
                            if (jsonData) {
                                try {
                                    const data = JSON.parse(jsonData);
                                    console.log('收到数据块:', data); // 打印每个数据块以便调试

                                    // *** 核心逻辑：尝试从数据块中提取 URL ***
                                    // 根据用户提供的示例数据调整
                                    let potentialUrl = null;
                                    // 检查直接在数据块顶层的字段
                                    if (data.role === 'assistant' && 
                                        data.type === 'answer' && 
                                        data.content &&
                                        data.content_type === 'text') {
                                        
                                        const contentString = data.content;
                                        console.log('找到 answer 类型的消息，content 为:', contentString);
                                        
                                        try {
                                            // 尝试将 content 字符串解析为 JSON 数组
                                            const contentArray = JSON.parse(contentString);
                                            
                                            // 检查是否是数组且至少有一个元素
                                            if (Array.isArray(contentArray) && contentArray.length > 0) {
                                                const firstElement = contentArray[0];
                                                // 检查第一个元素是否是字符串且像 URL
                                                if (typeof firstElement === 'string' && (firstElement.startsWith('http://') || firstElement.startsWith('https://'))) {
                                                    potentialUrl = firstElement;
                                                    console.log('从 content 数组中提取到 URL:', potentialUrl);
                                                } else {
                                                     console.warn('Content 数组的第一个元素不是有效的 URL 字符串:', firstElement);
                                                }
                                            } else {
                                                console.warn('Content 解析后不是包含元素的数组:', contentArray);
                                            }
                                        } catch (parseError) {
                                            // 如果 content 不是有效的 JSON 字符串，或者不是预期的数组格式
                                            // 检查 content 本身是否是 URL (作为备选)
                                             if (typeof contentString === 'string' && (contentString.startsWith('http://') || contentString.startsWith('https://'))) {
                                                 potentialUrl = contentString;
                                                 console.log('直接从 content 字符串中提取到 URL:', potentialUrl);
                                             } else {
                                                console.warn('无法将 content 解析为 JSON 数组，且其本身不是 URL:', contentString, parseError);
                                             }
                                        }
                                    // 保留原来检查 data.message 的逻辑作为备用 (以防数据结构变化)
                                    } else if (data.message && 
                                         data.message.role === 'assistant' && 
                                         data.message.type === 'answer' && 
                                         data.message.content &&
                                         data.message.content_type === 'text') {
                                        
                                        const contentString = data.message.content;
                                        // 代码与上面相同，解析 content 并提取 URL...
                                        try {
                                            const contentArray = JSON.parse(contentString);
                                            if (Array.isArray(contentArray) && contentArray.length > 0) {
                                                const firstElement = contentArray[0];
                                                if (typeof firstElement === 'string' && (firstElement.startsWith('http://') || firstElement.startsWith('https://'))) {
                                                    potentialUrl = firstElement;
                                                }
                                            }
                                        } catch (parseError) {
                                            if (typeof contentString === 'string' && (contentString.startsWith('http://') || contentString.startsWith('https://'))) {
                                                potentialUrl = contentString;
                                            }
                                        }
                                    } else if (data.url) { // 备用检查顶层 url 字段
                                         potentialUrl = data.url;
                                         console.log('从顶层 data.url 提取到 URL:', potentialUrl);
                                    }

                                    if (potentialUrl) {
                                        urlFound = true;
                                        
                                        // 清除旧状态和内容
                                        outputArea.innerHTML = '';
                                        
                                        // 创建一个结果容器
                                        const resultContainer = document.createElement('div');
                                        resultContainer.style.marginTop = '20px';
                                        
                                        // 添加状态信息
                                        const statusDiv = document.createElement('div');
                                        statusDiv.textContent = '图片已获取:';
                                        resultContainer.appendChild(statusDiv);
                                        
                                        // 创建图片元素
                                        const img = document.createElement('img');
                                        img.src = potentialUrl;
                                        img.alt = '生成的图片';
                                        img.style.maxWidth = '100%';
                                        img.style.marginTop = '10px';
                                        img.style.marginBottom = '10px';
                                        img.style.border = '1px solid #ddd';
                                        img.style.borderRadius = '4px';
                                        img.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
                                        resultContainer.appendChild(img);
                                        
                                        // 创建链接元素 (保留原有功能)
                                        const link = document.createElement('a');
                                        link.href = potentialUrl;
                                        link.textContent = '打开原始图片';
                                        link.target = "_blank";
                                        link.style.display = 'block';
                                        link.style.marginTop = '5px';
                                        resultContainer.appendChild(link);
                                        
                                        // 将整个结果容器添加到输出区域
                                        outputArea.appendChild(resultContainer);
                                        
                                        // 可选：滚动到结果区域
                                        resultContainer.scrollIntoView({ behavior: 'smooth' });
                                    }
                                } catch (e) {
                                    console.error('解析 JSON 数据块时出错:', e, '原始数据:', jsonData);
                                }
                            }
                        } else if (line.startsWith('event:')) {
                            // 可以处理其他事件类型，例如 'ping', 'done'
                            const eventType = line.substring(6).trim();
                            if (eventType === 'done' || eventType === 'error') {
                                console.log(`收到事件: ${eventType}`);
                                // 如果是 done 或 error 事件，可能意味着流结束
                            }
                        }
                    }
                }

                // 如果循环结束仍未找到 URL
                if (!urlFound) {
                    console.error("数据流处理完毕，但未找到 URL。");
                    statusDiv.textContent = '错误：API 返回的数据流中未包含有效的 URL。请检查控制台获取详细信息。';
                    statusDiv.style.color = 'red';
                }

            } catch (error) {
                console.error('获取或处理数据流时出错:', error);
                statusDiv.textContent = `获取 URL 时出错: ${error.message}`;
                statusDiv.style.color = 'red';
            }
        }

        // 为按钮添加点击事件监听器
        submitButton.addEventListener('click', () => {
            const userPrompt = promptInput.value.trim();
            if (userPrompt) {
                fetchAndInjectUrl(userPrompt);
            } else {
                // 清除之前的输出并提示输入
                 outputArea.innerHTML = '';
                 const errorDiv = document.createElement('div');
                 errorDiv.textContent = '请输入提示词！';
                 errorDiv.style.color = 'orange';
                 outputArea.appendChild(errorDiv);
            }
        });

        // 移除页面加载时自动调用
        // window.addEventListener('load', fetchAndInjectUrl);
    </script>
</body>
</html>